<div class="pull-right">
    <button class="btn btn-default btn-sm" type="button">Create project</button>
</div>
<h3>Projects</h3>
<div class="row">
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-info">started</div>
                </div>
                <h4 class="m0">Project #1</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">22%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="22" type="warning">22%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">22%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>01/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+5</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-info">started</div>
                </div>
                <h4 class="m0">Project #2</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">80%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="80" type="success">80%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">80%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>02/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+6</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-info">started</div>
                </div>
                <h4 class="m0">Project #3</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">50%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="50" type="info">50%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">50%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>03/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+7</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-warning">paused</div>
                </div>
                <h4 class="m0">Project #4</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">22%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="22" type="warning">22%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">22%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>04/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+8</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label bg-gray">pending</div>
                </div>
                <h4 class="m0">Project #5</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <p class="m0 text-center">This project does not register progress.</p>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>05/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+9</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-success">completed</div>
                </div>
                <h4 class="m0">Project #6</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">100%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="100" type="success">100%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">100%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>06/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+10</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label bg-gray-dark">canceled</div>
                </div>
                <h4 class="m0">Project #7</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">30%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="30" type="warning">30%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">30%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>04/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+8</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-info">started</div>
                </div>
                <h4 class="m0">Project #8</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">10%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="10" type="danger">10%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">10%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>05/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+9</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="panel b">
            <div class="panel-heading">
                <div class="pull-right">
                    <div class="label label-success">completed</div>
                </div>
                <h4 class="m0">Project #9</h4>
                <small class="text-muted">Sed amet lectus id.</small>
            </div>
            <div class="panel-body">
                <div class="table-grid table-grid-align-middle">
                    <div class="col">
                        <div class="visible-xs visible-sm text-bold text-muted text-right">100%</div>
                        <div tooltip="Health">
                            <progressbar class="progress-xs m0" value="100" type="success">100%</progressbar>
                        </div>
                    </div>
                    <div class="col wd-xxs text-right hidden-xs hidden-sm">
                        <div class="text-bold text-muted">100%</div>
                    </div>
                </div>
            </div>
            <table class="table">
                <tbody>
                    <tr>
                        <td>
                            <strong>Start date</strong>
                        </td>
                        <td>06/01/2016</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Members</strong>
                        </td>
                        <td>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/02.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/04.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/05.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <img class="img-circle thumb24" src="assets/img/user/06.jpg" alt="project member" />
                            </a>
                            <a class="inline">
                                <strong>+10</strong>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Leader</strong>
                        </td>
                        <td>
                            <a tooltip="Team leader">
                                <img class="img-circle thumb24" src="assets/img/user/03.jpg" alt="project member" />
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Metrics</strong>
                        </td>
                        <td>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsInfo" values="20,80"></div>
                            <div class="sparkline inline mr" [sparkline]="sparkOptionsSuccess" values="60,40"></div>
                            <div class="sparkline inline" [sparkline]="sparkOptionsWarning" values="90,10"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer text-center">
                <button class="btn btn-default" type="button">Manage project</button>
            </div>
        </div>
    </div>
</div>
